import React, { Component } from "react";

import { minusAction, addAction } from "./store/actionCreator";

// 3. 从react-redux解构connect
// connect是一个函数，这个函数的执行结果是一个高阶组件
import { connect } from "react-redux";
// connect需要传入两个参数（两个函数）

// 将仓库的state映射到组件的props里面
const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

// 将仓库的dispatch方法映射到组件的props里面
const mapDispatchToProps = (dispatch) => {
  return {
    add(num) {
      dispatch(addAction(num));
    },
    minus() {
      dispatch(minusAction());
    },
  };
};

class Counter extends Component {
  render() {
    // console.log(this);
    return (
      <>
        <button onClick={this.props.minus}>-</button>
        <span>{this.props.count}</span>
        <button onClick={() => this.props.add(2)}>+</button>
        <button onClick={() => this.props.add(3)}>+</button>
      </>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);
